import React from 'react'

// 定义SVG图标的通用属性接口
interface SvgIconProps {
  width?: number | string
  height?: number | string
  className?: string
  style?: React.CSSProperties
}

// 仪表盘图标
export const DashboardSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
  </svg>
)

// 设置图标
export const SettingSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
  </svg>
)

// 用户图标
export const UserSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4S8,5.79,8,8S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v2h16v-2 C20,15.34,14.67,14,12,14z"/>
  </svg>
)

// 团队图标
export const TeamSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M16,4c0-1.11,0.89-2,2-2s2,0.89,2,2s-0.89,2-2,2S16,5.11,16,4z M20,22v-6h2.5l-2.54-7.63A1.5,1.5,0,0,0,18.54,7.5H17.46A1.5,1.5,0,0,0,16.04,8.37L13.5,16H16v6H20z M12.5,11.5c0.83,0,1.5-0.67,1.5-1.5s-0.67-1.5-1.5-1.5S11,9.17,11,10S11.67,11.5,12.5,11.5z M5.5,6C6.61,6,7.5,5.11,7.5,4S6.61,2,5.5,2S3.5,2.89,3.5,4S4.39,6,5.5,6z M7.5,22v-7H9V9.5C9,8.67,8.33,8,7.5,8h-4C2.67,8,2,8.67,2,9.5V15h1.5v7H7.5z M14,22v-4h1.5v-3.5c0-1.25-0.75-2.25-2-2.25h-2c-1.25,0-2,1-2,2.25V18H11v4H14z"/>
  </svg>
)

// 安全图标
export const SafetySvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"/>
  </svg>
)

// 菜单图标
export const MenuSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>
  </svg>
)

// 监控图标
export const MonitorSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"/>
  </svg>
)

// 文件文本图标
export const FileTextSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
  </svg>
)

// 折线图图标
export const LineChartSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z"/>
  </svg>
)

// 文件图标
export const FileSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
  </svg>
)

// 编辑图标
export const EditSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/>
  </svg>
)

// 标签图标
export const TagsSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.59,19.41L2.59,12.41C2.22,12.05 2,11.55 2,11V4C2,2.89 2.89,2 4,2H11C11.55,2 12.05,2.22 12.41,2.59L19.41,9.59C19.77,9.95 20,10.45 20,11C20,11.55 19.78,12.05 19.41,12.41L14.41,17.41C14.05,17.77 13.55,18 13,18C12.45,18 11.95,17.78 11.59,17.41L17.41,11.58Z"/>
  </svg>
)

// 搜索图标
export const SearchSvg: React.FC<SvgIconProps> = ({ 
  width = 16, 
  height = 16, 
  className, 
  style 
}) => (
  <svg 
    width={width} 
    height={height} 
    className={className} 
    style={style}
    viewBox="0 0 24 24" 
    fill="currentColor"
  >
    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
  </svg>
)

// SVG图标映射对象 - 用于替换原有的Ant Design图标
export const svgIconMap: { [key: string]: React.FC<SvgIconProps> } = {
  DashboardOutlined: DashboardSvg,
  SettingOutlined: SettingSvg,
  UserOutlined: UserSvg,
  TeamOutlined: TeamSvg,
  SafetyOutlined: SafetySvg,
  MenuOutlined: MenuSvg,
  MonitorOutlined: MonitorSvg,
  FileTextOutlined: FileTextSvg,
  LineChartOutlined: LineChartSvg,
  FileOutlined: FileSvg,
  EditOutlined: EditSvg,
  TagsOutlined: TagsSvg,
  SearchOutlined: SearchSvg
}

// 通用SVG图标包装器组件
export const SvgIcon: React.FC<{ 
  name: string
  width?: number | string
  height?: number | string
  className?: string
  style?: React.CSSProperties
}> = ({ name, width = 16, height = 16, className, style }) => {
  const IconComponent = svgIconMap[name]
  
  if (!IconComponent) {
    return null
  }
  
  return (
    <IconComponent 
      width={width} 
      height={height} 
      className={className} 
      style={style}
    />
  )
}

export default SvgIcon